<template>
  <view class="page flex-col">
    <view class="box_7 flex-col">
      <view class="box_1 flex-col">
        <view class="block_3 flex-row">
          <view class="image-text_15 flex-row justify-between">
            <image
              class="thumbnail_5"
              referrerpolicy="no-referrer"
              src="./imgs/search.png"
            />
			      <input class="text text-group_1" @confirm="loadMoreData(true)" placeholder="请输入实验名称">
          </view>
        </view>
        <view class="block_4 flex-col">
          <view class="text-wrapper_8 flex-row justify-around">
            <text class="text_4 tab" v-for="(item,index) in options" :key="index" :class="{'tab-active':activeIndex==index}" @click="handleTab(item,index)">
              {{ item.label }}
            </text>
          </view>
          <view class="box_8 flex-row">
            <!-- <view class="box_2 flex-col"></view> -->
          </view> 
        </view>
      </view>
      <view class="grid_3 flex-row">
          <scroll-view scroll-y="true" @scrolltolower="loadMoreData" style="width: 100%;height: 100%;">
            <view class="grid">
              <view class="list-items_1 flex-col" v-for="(item, index) in loopData0" :key="index" @click="gotoDetail(item)">
                <view class="image-text_16 flex-col">
                  <view
                      class="box_3 flex-col"
                  >
                    <image :src="item.thumb_url"></image>
                  </view>
                  <text class="text-group_2" v-html="item.name"></text>
                </view>
                <view class="text-wrapper_9 flex-row justify-between">
                  <text class="text_6">良益科技</text>
                  <text class="text_8">
                    <text class="text_7">#</text>
                    {{item.experiment_category_name}}
                  </text>
                </view>
              </view>
              <text class="text_9" v-if="isFinish">没有更多了～</text>
            </view>
          </scroll-view>
      </view>
    </view>
    <tabBar :tabIndex="0"></tabBar>
  </view>
</template>
<script>
export default {
  data() {
    return {
      loopData0: [],
	    activeIndex: 0,
      type: 1, // 区分实验库类型 调用不同接口
      constants: {},
      keyword: '',
      current: 1,
      pageSize: 10,
      isFinish: false,
      options: [
        {
          label: '标准实验库',
          value: 1,
        },
        {
          label: '校本实验库',
          value: 2,
        },
      ],
    };
  },
  async onLoad() {
    // await this.getOptionsData()
    await this.loadMoreData(true)
  },
  methods: {
	  handleTab(item,index){
      this.activeIndex = index
      this.type = item.value
      this.loadMoreData(true)
	  },
    // async getOptionsData () {
    //   const res = await this.API.ExperimentTypeOptions({});
    //   console.log(res);
    //   this.options = res;
    //   this.type = res[0]?res[0].value:''
    // },
    async loadMoreData(reset = false){
      if(reset){
        this.current = 1
        this.loopData0 = []
      }
      let param = {
        current: this.current,
        pageSize: this.pageSize,
        experiment_category_idArray: [],
        for_student: true,
        keyword: this.keyword,
      }
      let res
      if(this.type == 1){
        res = await this.API.ExperimentPagedList({args: param})
      } else if (this.type == 2){
        res = await this.API.CustomerExperimentPagedList({args: param})
      }
      console.log('res',res)
      if(res){
        this.loopData0 = this.loopData0.concat(res.data)
        if(this.loopData0.length == res.total){
          this.isFinish = true
        } else {
          this.current++;
          this.isFinish = false;
        }
      }
    },
	  gotoDetail(item){
      uni.navigateTo({
        url: '/pages/index/detail?experiment_id='+ item.experiment_id
      });
	  },
  },
};
</script>
<style lang="less" scoped>
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 750rpx;
  height: 100%;
  .box_7 {
    //padding-bottom: 148rpx;
    flex: 1;
    .box_1 {
      box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
      background-color: rgba(255, 255, 255, 1);
      padding-top: 24rpx;
      .block_3 {
        background-color: rgba(248, 249, 251, 1);
        border-radius: 19px;
        width: 686rpx;
        align-self: center;
        padding: 20rpx 422rpx 20rpx 20rpx;
        .image-text_15 {
          width: 244rpx;
          .thumbnail_5 {
            width: 40rpx;
            height: 40rpx;
          }
          .text-group_1 {
            overflow-wrap: break-word;
            color: rgba(191, 191, 191, 1);
            font-size: 28rpx;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
          }
        }
      }
      .block_4 {
        box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
        background-color: rgba(255, 255, 255, 1);
        margin-top: 24rpx;
        padding: 12rpx 24rpx 0 24rpx;
        .text-wrapper_8 {
          width: 100%;

          .tab{
            overflow-wrap: break-word;
            color: rgba(89, 89, 89, 1);
            font-size: 28rpx;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
            position: relative;
          }
          .tab-active{
            color: rgba(39, 118, 255, 1);
          font-family: PingFangSC-Medium;
          font-weight: 500;
          }
          .tab-active:before{
            content: '';
            position: absolute;
            bottom: -20%;
            left: calc(50% - 20rpx);
            width: 40rpx;
            height: 6rpx;
            border-radius: 3rpx;
            background: rgba(39, 118, 255, 1);
          }
        }
        .box_8 {
          margin: 6rpx 276rpx 0 30rpx;
          .box_2 {
            background-color: rgba(39, 118, 255, 1);
            border-radius: 4px 4px 0px 0px;
            width: 80rpx;
            height: 6rpx;
          }
        }
      }
    }
    .grid_3 {
      width: 696rpx;
      //height: 832rpx;
      height: calc(100% - 192rpx - 44px - 24rpx - 24rpx);
      flex-wrap: wrap;
      margin: 24rpx 30rpx 0 24rpx;
      padding-bottom: 34px;
      .grid{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 148rpx;

        .list-items_1 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 12px;
          width: 336rpx;
          height: 404rpx;
          padding-bottom: 16rpx;
          margin: 0 24rpx 24rpx 0;
          &:nth-child(2n) {
            margin-right: 0;
          }
          &:nth-last-child(-n + 2) {
            margin-bottom: 0;
          }
          .image-text_16 {
            .box_3 {
              border-radius: 12rpx 12rpx 0rpx 0rpx;
              width: 336rpx;
              height: 220rpx;
              image{
                width: 100%;
                height: 100%;
                border-radius: 12rpx 12rpx 0rpx 0rpx;
              }
            }
            .text-group_2 {
              width: 288rpx;
              height: 80rpx;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 28rpx;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: left;
              line-height: 40rpx;
              align-self: center;
              margin-top: 24rpx;
            }
          }
          .text-wrapper_9 {
            width: 288rpx;
            align-self: center;
            margin-top: 32rpx;
            .text_6 {
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 24rpx;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 32rpx;
            }
            .text_8 {
              overflow-wrap: break-word;
              color: rgba(140, 140, 140, 1);
              font-size: 24rpx;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 32rpx;
              margin-left: 8rpx;

              .text_7 {
                overflow-wrap: break-word;
                color: rgba(255, 112, 36, 1);
                font-size: 24rpx;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 32rpx;
                margin-right: 5rpx;
              }
            }
          }
        }
      }
    }
    .text_9 {
      overflow-wrap: break-word;
      color: rgba(191, 191, 191, 1);
      font-size: 24rpx;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 34rpx;
      margin: 32rpx 300rpx 0 306rpx;
    }
  }
}

</style>
